<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>萌宠找货详情</title>
    <link rel="stylesheet" href="/css/content.css">
</head>
<body>
    <header></header>

    <main>
        <div class="content" >
            <div class="main-title-nav">
                <span>
                    <a href="/index.html" style="color: #666666;">宠萌找货</a>
                    &nbsp;&nbsp;>&nbsp;&nbsp;
                    <a href="/web/list.html" style="color: #666666;">商品列表</a>
                    &nbsp;&nbsp;>&nbsp;&nbsp;
                    <i id="title-i"></i>
                </span>
            </div>

            <div class="shopshow" id="shopshow"></div>

            <script type="text/html" id="shopShow">
                <div class="showLeft">
                    <div class="show-left-minimg">
                        <img src="{{src}}" alt="">
                    </div>
                    <div class="showLeft-maximg">
                        <img src="{{src}}" class="zoom-image">
                    </div>
                </div>
                <div class="showRight">
                    <p>{{title}}</p>
                    <div class="shop-price">
                        <div class="price">
                            售价: <span>￥</span>&nbsp;&nbsp;<b>{{price}}</b><s>{{price}}</s>
                        </div>
                        <div class="sales">
                            促销: <span>无</span>
                        </div>
                        <div class="service">
                            服务: <span><b>·</b>&nbsp;&nbsp;48小时快速退款&nbsp;&nbsp; <b>·</b>&nbsp;&nbsp;365天贴心服务</span>
                        </div>
                    </div>

                    <div class="default">
                        默认: <span>默认</span>
                    </div>
                    <div class="showRight-num">
                        数量: <input type="number" value="1" min=1>
                    </div>

                    <div class="showRight-buy">
                        <div class="buy">立即购买</div>
                        <div class="shopcar" id="shopCar">加入购物袋</div>
                    </div>
                </div>
            </script>

            <script type="text/html" id="shopShow-panda">
                <div class="showLeft">
                    <ul id="showLeft-minimg" class="showLeft-minimg">
                        {{each photo image}}
                            <li>
                                <a href="javascript:;" data-image="{{image.url}}">
                                    <img src="{{image.url}}">
                                </a>
                            </li>
                        {{/each}}
                    </ul>
                    <img src="{{image}}" class="zoom-image showLeft-maximg">
                </div>
                <div class="showRight">
                    <p>{{title}}</p>
                    <div class="shop-price">
                        <div class="price">
                            售价: <span>￥</span>&nbsp;&nbsp;<b>{{price}}</b><s>原价: {{originPrice}}</s>
                        </div>
                        <div class="sales">
                            促销: <span>{{couponValue}}</span>
                        </div>
                        <div class="service">
                            服务: <span><b>·</b>&nbsp;&nbsp;{{accessoryHints[0]}}&nbsp;&nbsp; <b>·</b>&nbsp;&nbsp;{{accessoryHints[1]}}</span>
                        </div>
                    </div>

                    <div class="default">
                        默认价格: <span>￥{{price}}</span>
                    </div>
                    <div class="showRight-num">
                        数量: <input type="number" value="1" min=1>
                    </div>

                    <div class="showRight-buy">
                        <div class="buy">立即购买</div>
                        <div class="shopcar" id="shopCar">加入购物袋</div>
                    </div>
                </div>
            </script>

            <div class="shop-bottom" >
                <div class="shop-left">
                    <div class="left-title">商品详情</div>
                    <div class="left-img" id="shop-left"></div>
                    <script type="text/html" id="shop-content">
                        <img src="{{src}}">
                    </script>

                    <script type="text/html" id="shop-panda">
                        {{each descContentList picture}}
                            {{if picture.photo}}
                            <img src="{{picture.photo.url}}" alt="">
                            {{/if}}
                        {{/each}}
                    </script>
                </div>
                

                <div class="shop-right">
                    <div class="right-title">猜你喜欢</div>
                    <ul class="like-ul" id="like-ul"></ul>
                    <script type="text/html" id="rap2-list">
                        {{each list like}}
                            <li data-likeId="{{like.id}}">
                                <div class="likeList-img">
                                    <img src="{{like.src}}" alt=""/>
                                </div>
                                <div class="likeList-text">{{like.title}}
                                    <span class="likeList-price">￥{{like.price}}</span>
                                </div>
                            </li>
                        {{/each}}
                    </script>
                </div>
            </div>
        </div>

        <div class="main-shopping" id="flyShop" onclick="location.href='/web/shop.html'">
            <img src="/img/car.png" alt="">
            <div class="shopping-text">购物袋</div>
        </div>

        <div class="main-top" id="main-top">
            <img src="/img/top.png" alt="">
            <p>top</p>
        </div>
    </main>
    <footer></footer>
    <script src="/libs/require/require.min.js" data-main="/js/content"></script>
</body>
</html>